<style scoped lang="stylus" type="text/stylus">
  .block-page {
    position relative
    height : 100%
    background-color : #fff;
    .edit-header {
      position : fixed
      top : 0
      height : 60px
      line-height : 60px;
      padding-left : 40px;
      font-size : 18px;
      background-color : #4c4c4c
      .route-title {
        color : #fff
        cursor : pointer
      }
      .page-name {
        color : #7f7f7f
      }
    }
    .block-page-ps {
      position relative
      height : 100%
      padding : 40px
    }
    .enclosure-item {
      overflow : hidden;
    }

    .enclosure-list {
      position : relative;
      width : 514px
      margin : 0 auto 10px
      padding-right : 34px;
      overflow : hidden;

      div.del {
        display : none
        position : absolute;
        top : 0;
        right : 0
        width : 24px
        height : 24px
        line-height : 24px
        text-align : center;
        cursor : pointer;
        background-color : #FB607F;
        i {
          /*font-size : 22px;*/
          color : #fff
        }
      }
      &:hover {
        div.del {
          display : block
        }
      }
    }

    .enclosure-list-con {
      height : 100%;
      padding : 20px 30px;
      font-size : 18px;
      background-color : #fff;

      .company-name {
        font-size : 18px;
        color : #292D3D;
      }

      .policy {
        .title {
          font-size : 14px;
          color : #999999
        }
        a {
          font-size : 14px;
          color : #4A96FF;
        }
      }

      .bottom {
        margin : 10px 0 20px;
        font-size : 14px;
        color : #000;
        font-size : 16px;
      }
    }
  }
</style>

<template>
  <div class="block-page">
    <div class="edit-header">
      <span @click="GoBack()" class="route-title">设置</span>
      <span class="page-name">&nbsp;/&nbsp;企业黑名单</span>
    </div>
    <VuePerfectScrollbar class="block-page-ps">
      <div class="enclosure-item" id="enclosure-item">
        <div v-for="(item,index) in blockedList" :key="index" class="enclosure-list">
          <div class="enclosure-list-con">
            <div class="company-name">{{item.name}}</div>
            <div class="bottom"><span>拉黑时间：{{getTime(item.blockAt,1)}}</span></div>

            <div class="policy">
              <div class="title">该企业的申请</div>
              <ul>
                <li v-for="items in item.applies" :key="items.id">
                  <a @click="readApply(items.id)" href="javascript:;">{{items.policyShortTitle}}&nbsp;|&nbsp;{{sta[items.applyStatus]}}&nbsp;|&nbsp;提交于{{getTime(items.lastUpdateAt,1)}}</a>
                </li>
              </ul>
            </div>
          </div>
          <div @click="companyUnBlock(item.id)" class="del">
            <Icon type="close"></Icon>
          </div>
        </div>
      </div>
    </VuePerfectScrollbar>
  </div>

</template>

<script type="text/ecmascript-6">

  export default {
    name      : 'BlockList',
    data() {
      return {
        blockedList: [],
        sta        : {
          '10': '完成0%',
          '11': '完成x%',
          '18': '完成100%',
          '20': '未阅读',
          '21': '未处理',
          '22': '感兴趣',
          '23': '不考虑',
          '29': '驳回',
          '30': '已通过线上审核',
          '31': '已通过线上审核',
          '38': '已拨款',
          '39': '拒绝拨款',
          '40': '政策自动过期',
          '41': '政策强行下架',
          '42': '拉黑',
          '49': '强行中断',
        },
      }
    },
    computed  : {},
    methods   : {
      // 获取拉黑列表
      getBlockedList() {
        this.ajaxData({
          type: 'get',
          url : '/company/blocked'
        }, (rets, all) => {
          this.blockedList = rets
        })
      },
      /**
       * 查看申请
       * @param applyId
       */
      readApply(applyId) {
        this.$router.push({
          path : '/component',
          name : 'Component',
          query: {
            id      : applyId,
            block   : true,
            pageName: '黑名单',
            name    : 'blockList'
          },
        })
      },
      // 解除拉黑
      companyUnBlock(id) {
        this.ajaxData({
          type: 'post',
          url : `/company/${id}/unblock`
        }, (res, all) => {
          if (all.code == 0) {
            this.$Message.info('企业已解除拉黑');
            this.getBlockedList()
          }
        })
      },
    },
    created() {
      this.getBlockedList()
    }
  }
</script>
